<template>
  <div class="container">
    <van-nav-bar fixed>
      <template #left>
        <!-- <div class="logo2"></div> -->
        <van-nav-bar
          left-arrow
          @click-left="$router.back()"
          left-text="返回"
        ></van-nav-bar>
      </template>
      <template #right>
        <!-- 主页搜索按钮 -->
        <van-button
          round
          class="search-btn"
          icon="search"
          type="info"
          @click="$router.push({ path: '/search' })"
        >
          <span class="searchFontColor">搜索</span>
        </van-button>
      </template>
    </van-nav-bar>
    <span>栏目</span>
     <van-row>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
        <van-cell v-for="item in list" :key="item.id"   >
          <img :src="item.imgs"   class="newImg" alt="">
          <span>{{item.text}}</span>
        </van-cell>
    </van-list>
     </van-row>
  </div>
</template>

<script>
import { getLists, regExpData } from './column.js'

export default {
  data () {
    return {
      loading: false,
      finished: false,
      list: []
    }
  },
  methods: {
    async onLoad () {
      // 异步更新数据
      const res = await getLists({
        aid: 807275,
        roleid: 14371
      }).then(res => {
        this.list = regExpData(res.data)
        console.log(this.list, '吃')
      })
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push()
        }
        // 加载状态结束
        this.loading = false

        // 数据全部加载完成
        if (this.list.length >= this.list.length) {
          this.finished = true
        }
      }, 1000)
    }
  },
  async created () {
  }
}
</script>

<style lang="less">
.container {
  background-color: #f6f7fb;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding-top: 46px;
  padding-bottom: 50px;
  overflow: hidden;
  overflow-y: auto;
  .logoText {
    color: #357d24;
    font-size: 12px;
  }
  .van-nav-bar__arrow {
    color: #357d24 !important;
  }
  .van-nav-bar__text {
    color: #357d24 !important;
    width: 50px;
  }
  .newImg {
  width: 50%;
  left: 0;
}
}
</style>
